<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Taco Cloud</title>
</head>

<body>

    <form method="post" th:action="@{/orders}" th:object="${order}">
        <h1>Order your taco creations</h1>

        <img th:src="@{/images/TacoCloud.png}" style="height: 200px; width: 300px"/>
        <a th:href="@{/design}" id="another">Design another taco</a><br/>

        <div th:if="${#fields.hasErrors()}">
            <span class="validationError">
                Please correct the problems below and resubmit.
            </span>
        </div>
        <h3>Deliver my taco masterpreces to...</h3>
        <label for="name">Name: </label>
        <input id="name" type="text" th:field = "*{name}"/>
        <span class="validationError" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">name Error</span>
        <br/>

        <label for="street">Street: </label>
        <input id="street" type="text" th:field = "*{street}"/>
        <span class="validationError" th:if="${#fields.hasErrors('street')}" th:errors="*{street}">street Error</span>
        <br/>

        <label for="city">City: </label>
        <input id="city" type="text" th:field = "*{city}"/>
        <span class="validationError" th:if="${#fields.hasErrors('city')}" th:errors="*{city}">city Error</span>
        <br/>

        <label for="state">State: </label>
        <input id="state" type="text" th:field = "*{state}"/>
        <span class="validationError" th:if="${#fields.hasErrors('state')}" th:errors="*{state}">state Error</span>
        <br/>

        <label for="zip">Zip: </label>
        <input id="zip" type="text" th:field = "*{zip}"/>
        <span class="validationError" th:if="${#fields.hasErrors('zip')}" th:errors="*{zip}">zip Error</span>
        <br/>

        <h3>Here's how I'll pay...</h3>
        <label for="ccNumber">ccNumber: </label>
        <input id="ccNumber" type="text" th:field = "*{cc_Number}"/>
        <span class="validationError" th:if="${#fields.hasErrors('cc_Number')}" th:errors="*{ccNumber}">CC Num Error</span>
        <br/>

        <label for="ccExpiration">CcExpiration: </label>
        <input id="ccExpiration" type="text" th:field = "*{cc_Expiration}"/>
        <span class="validationError" th:if="${#fields.hasErrors('cc_Expiration')}" th:errors="*{ccExpiration}">ccExpiration Error</span>
        <br/>

        <label for="ccCVV">CcCVV: </label>
        <input id="ccCVV" type="text" th:field = "*{cc_CVV}"/>
        <span class="validationError" th:if="${#fields.hasErrors('cc_CVV')}" th:errors="*{ccCVV}">ccCVV Error</span>
        <br/>

        <input type="submit" value="Submit order">
    </form>

</body>

</html>